<template>
    <el-row>
        <el-col>
            <json-form :data="data" :formData="formData" @valueChange="valueChange" class="form"> </json-form>
        </el-col>
    </el-row>
</template>
<script setup>
import { onMounted ,ref} from 'vue'
const data = [
    {   id:'input1',
        type: "input",
        name: "BasicInput",
        placeholder: "请输入",
        title: "单文本输入",
        clearable: true,
        otherType: "text",
        rule: { required: true, trigger: "blur", message: "请填写内容" },
        class:['a','b']
    },
    {   
        id:'select1',
        type: "select",
        name: "Select",
        placeholder: "请输入",
        title: "下拉框",
        rule: { required: false, trigger: "change", message: "请选择" },
        option:[{label:'下拉框1',value:'01'},{label:'下拉框2',value:'02'},{label:'下拉框3',value:'03'}],
        multiple:true
    },
];
const formData = ref({})
const handlerData = (data) => {
    let formData = {};
    data.forEach((item) => {
        formData[item.id] = "";
    });
    return formData;
};
const valueChange = (key,value)=>{
    console.log(key);
    formData.value[key] = value
}
onMounted(()=>{
    formData.value = handlerData(data)
})
</script>
<style scoped>
.form{
    display: flex;
}
</style>